<template>
	<view class="page" ref="page">
		<!-- 搜索 -->
		<view class="search-index">
			<!-- #ifndef H5 -->
				<view class="icon" @click="onCode">
					<text class="iconfont icon-saoyisao"></text>
				</view>
			<!-- #endif -->
			<!-- #ifdef  H5 -->
			<view class="icon" @click="onPayCode">
				<text class="iconfont icon-fukuanma"></text>
			</view>
			<!-- #endif -->
			<view class="search">
				<view class="iconfont icon-fadajing"></view>
				<input @confirm="openSearch($event.detail.value)" type="text" placeholder="输入搜索内容" />
			</view>
			<view class="icon">
				<text class="iconfont icon-xiaoxi"></text>
			</view>
		</view>
		<!-- 分类数据 -->
		<view class="classify-data" >
			<view class="classify-one">
				<scroll-view id="leftScroll" scroll-y class="classify-list" :scroll-with-animation="true" :scroll-top="leftScrollTop">
					<view class="list left-scroll-item" v-for="(item,index) in list" :key="index"
					:class=" activeIndex==index ? 'action' : ''" @tap="changeCate(index)">
						<text>{{item.name}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="classify-two-three">
				<scroll-view @scroll="onRightScroll" @scrolltolower="onRightlower"
				 scroll-y class="scroll" :scroll-with-animation="true" :scroll-top="rightScrollTop">
					<view class="classify-two right-scroll-item" v-for="(item,index) in list" :key="index">
						<view class="two-name">
							<view class="name">{{item.name}}</view>
						</view>
						<view class="classify-three">
							<view class="list" @click="openSearch(goods.title)" v-for="(goods,index1) in item.items" :key="index1">
								<image :src="goods.icon"></image>
								<text>{{goods.title}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- tabbar -->
		<TabBar :tabBarShow="1"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	export default {
		components:{
			TabBar,
		},
		data() {
			return {
				activeIndex: 0,//当前选中的类型
				list:[],//商品数据
				leftDomsTop: '',//左边的每个top
				rightDomsTop:[],//右边的每个top
				rightScrollTop: 0,
				cateItemHeight: 0,// 左边类目的高度
				leftScrollTop: 0,// 右边滑动监听左边的类目的样式
			};
		},
		onLoad(){
			this.sendRequest()
		},
		onReady() {
			setTimeout(()=>{
			  uni.hideTabBar()  
			},100)
		},
		watch: {
			async activeIndex(newValue, oldValue) {
				this.leftScrollTop = (newValue - 5) * 40
			}
		},
		methods:{
			// 获取节点信息
			getElInfo(obj = {}) {
				return new Promise((res, rej) => {
					let options = {
						size: obj.size ? true : false,
						rect: obj.rect ? true : false,
						scrollOffset: obj.scrollOffset ? true : false
					}
					const query = uni.createSelectorQuery().in(this);
					let q = obj.all ? query.selectAll(`.${obj.all}-scroll-item`) : query.select('#leftScroll')
					q.fields(options, data => {
						res(data)
					}).exec();
				})
			},
			// 请求分类列表数据
			sendRequest: function() {
				this.$api.searchgoods({noncestr: Date.now()}).then((res)=>{
					let data = res.data.data
					this.list = data
					// console.log('request success', data)
					
					this.$nextTick(function() {
						// 左右边的每个top
						this.getElInfo({
							all: 'left',
							size: true,
							rect: true
						}).then(data => {
								this.leftDomsTop = data.map(v => {
								this.cateItemHeight = v.height
								return v.top
							})
							// console.log("this.leftDomsTop ", this.leftDomsTop);
						})

						this.getElInfo({
							all: 'right',
							size: false,
							rect: true
						}).then(data => {
							this.rightDomsTop = data.map(v => {
								return v.top
							})
							// console.log("this.rightDomsTop", this.rightDomsTop);
						})

					})
					
				}).catch((err)=>{
					console.log('request fail', err);
				})
			},
			// 点击左边分类
			changeCate(index) {
				if(this.activeIndex === index)return false;
				this.activeIndex = index
				// 右边scroll-view 滚动到 对应区块
				this.rightScrollTop = this.rightDomsTop[index] - this.rightDomsTop[0]

			},
			// 监听右边滚动
			// 顶部到滚动的距离
			async onRightScroll(e) {
				// 匹配到当前的scrollTop所处的索引
				// 如果右边的滚动距离大于 右边的每个DOOM节点的固定TOP
				//就重新复制index,使左边动态改变
				this.rightDomsTop.forEach((v, k) => {
					// console.log(`${v}`,`${e.detail.scrollTop}`)
					if (v - this.rightDomsTop[0] < e.detail.scrollTop + 3) {
						this.activeIndex = k
						return false
					}
			
				})
			},
			onRightlower(){

			},
			/**
			 * 扫一扫点击
			 */
			onCode(){
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
							console.log('条码类型：' + res.scanType);
							console.log('条码内容：' + res.result);
					}
				});
			},
			/**
			 * 付款码点击
			 */
			onPayCode(){
				uni.navigateTo({
					url: '/pages/PaymentCode/PaymentCode'
				})
			},
			// 打开搜索页
			openSearch(item) {
				// console.log(item)
				uni.navigateTo({
					url: '../SearchGoodsList/SearchGoodsList?keyword=' + encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</script>

<style scoped lang="scss">
@import 'classify.scss'
</style>
